<template>
  <div>
    <el-card :body-style="classBody">
      <el-row slot="header" type="flex" align="middle" justify="space-between">
        <i class="iconfont icon-humidity my-iconfont">
          <span class="my-iconfont-text">湿度</span>
        </i>
        <status-indicator :status="'positive'" :pulse="true" />
      </el-row>
      <el-progress
          :stroke-width="10"
          :format="onProgressText"
          :percentage="10"
          type="dashboard"
      />
      <el-row>
        适宜指数：<el-tag size="mini" effect="plain">良好</el-tag>
        <el-rate
            v-model="value"
            disabled
            text-color="#ff9900"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Humidity",
  data() {
    return {
      value: 3.7,
      classBody: {
        padding: '12px'
      }
    }
  },
  methods: {
    onProgressText(percentage) {
      return percentage + 'RH'
    }
  }
}
</script>

<style scoped>
.my-iconfont {
  font-size: 30px;
}
.my-iconfont-text {
  margin-left: 5px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}
</style>
